<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>
		<style>
			* { margin: 0; padding: 0}
		</style>
	</head>
	<body>
                  
                  
            <script src="../js/three.js"></script>
            <script src="../js/orbitControls.js"></script> 
		<script>
            /*
            *创建场景对象
            */ 
            let scene = new THREE.Scene();
            /*
            *创建立方体网格模型
            */
            let box = new THREE.BoxGeometry(64, 128, 256);//矩形平面
            // 加载6个面的纹理图
            let texture1 = new THREE.TextureLoader().load( '../images/1.jpg' );
            let texture2 = new THREE.TextureLoader().load( '../images/2.jpg' );
            let texture3 = new THREE.TextureLoader().load( '../images/4.jpg' );
            let texture4 = new THREE.TextureLoader().load( '../images/4.jpg' );
            let texture5 = new THREE.TextureLoader().load( '../images/5.jpg' );
            let texture6 = new THREE.TextureLoader().load( '../images/6.jpg' );

            // 纹理对象赋值给6个材质对象
            let materiaArr = [
                new THREE.MeshPhongMaterial({map: texture1}),
                new THREE.MeshPhongMaterial({map: texture2}),
                new THREE.MeshPhongMaterial({map: texture3}),
                new THREE.MeshPhongMaterial({map: texture4}),
                new THREE.MeshPhongMaterial({map: texture5}),
                new THREE.MeshPhongMaterial({map: texture6})
            ]
            // 6个材质对象组成的数组赋值给MeshFaceMaterial构造函数
            let mesh = new THREE.Mesh(box,materiaArr);//纹理贴图网格模型对象
            scene.add(mesh);//网格模型添加到场景中

            /**
            * 光源设置
            */
            // 点光源
            let point = new THREE.PointLight(0xffffff); // 0xffffff 定义光照强度
            point.position.set(400, 200, 300); // 点光源位置
            scene.add(point); // 点光源添加到场景中
            // 环境光
            let ambient = new THREE.AmbientLight(0x444444);
            scene.add(ambient);
            
            /*
             *相机设置 
            */
            let width = window.innerWidth;
            let height = window.innerHeight;
            let k = width / height; // 窗口宽高比
            let s = 200; // 三维场景缩放系数
            let camera = new THREE.OrthographicCamera (-s*k,s*k, s,-s,0.1,1000); // 正交相机，参数为左边偏移（偏移是相对于相机中心位置，不是坐标）
                                                                              // ，右偏移，上偏移，下偏移，近平面距离、远平面距离
            
            // let camera = new THREE.PerspectiveCamera (45, k, 1, 1000); //视角、宽高比、近平面距离、远平面距离
            camera.position.set(100, 100, 100); // 设置相机位置
            camera.lookAt(scene.position); // 设置相机方向（指向的场景对象）

            /**
            * 创建div元素(作为立方体标签)
            */
            var div = document.createElement('div');
            div.innerHTML = '立方体';
            div.style.padding = '5px';
            div.style.position = 'absolute';
            div.style.backgroundColor = 'rgba(155,0,155,0.8)';
            document.body.appendChild(div);
            function tag() {
                /**
                * 立方体世界坐标转屏幕坐标
                    */
                //获取网格模型boxMesh的世界坐标
                var worldVector = new THREE.Vector3(
                    mesh.position.x,
                    mesh.position.y,
                    mesh.position.z
                );
                var standardVector = worldVector.project(camera);//世界坐标转标准设备坐标
                var a = window.innerWidth / 2;
                var b = window.innerHeight / 2;
                var x = Math.round(standardVector.x * a + a);//标准设备坐标转屏幕坐标
                var y = Math.round(-standardVector.y * b + b);//标准设备坐标转屏幕坐标
                /**
                * 更新立方体元素位置
                */
                div.style.left = x + 'px';
                div.style.top = y + 'px';
            }
            tag();



            /*
            * 创建渲染器对象
            */
            let renderer = new THREE.WebGLRenderer({
                antialias:true,       //是否开启反锯齿
            });
            renderer.setSize(width, height);
            renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
            document.body.appendChild( renderer.domElement );// body元素中插入canvas对象
            function render() { // 贴图（使用图片）的3D模型需要不断渲染才能显示
                renderer.render(scene,camera);//执行渲染操作
                requestAnimationFrame(render);
            }
            render();
            var controls = new THREE.OrbitControls(camera);//创建控件对象
            controls.addEventListener('change', render);//监听鼠标、键盘事件
		</script>
	</body>
</html>